<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="http://api.chinaola.net/ola/Application/Test/Public/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="http://api.chinaola.net/ola/Application/Test/Public/css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="http://api.chinaola.net/ola/Application/Test/Public/css/base.css"/>
		<style type="text/css">
			body{
				background: #FFFFFF;}
			#beforenext,#question-area,.bg{
				background: #FFFFFF;
			}
			.bg{
				padding: 40px 0 10px 0;
			}
			.mui-content{
				background: #f5f6fa;
			}

			#beforenext {text-align: center;height: 49px;line-height: 49px;}
			#beforenext a {font-size: 18px;color: black;}
			#beforenext span {font-size: 40px;color: black;}
			#question-area{width: 95%;margin: 40px auto;border: 1px solid #D3D3D3;
			box-shadow:-3px 0 3px #D3D3D3, /*左边阴影*/  3px 0 3px #D3D3D3, /*右边阴影*/
			 0 3px 3px #D3D3D3, /*顶部阴影*/  0 3px 3px #D3D3D3; /*底边阴影*/  }
			#question {margin-top: 2px; height: 60px;}
			#question p {font-size: 20px;color:#000000;padding: 25px 0 ;width: 300px;margin: 0 auto;}
			#choose {margin: 20px;}
			.score{margin-bottom: 12px;}
			#choose div p {text-align: center;font-size: 20px;color: #000000;}
			#choose div p:active{color: white;}
			.choosebg {background-color:#E3E3E3;border-radius: 10px;width: 100%;height: 49px;
			line-height: 3;color: #fff}
			#progressbar{width:100%; border:1px #F3F3F3 solid; height:25px; position: relative;
    		background-color: #F3F3F3}
			#bar{position:absolute;background-color: #6ccdff;width: 0%;height: 100%;}
			.choosebg_active:active{background: #6ccdff;}
			.bottom{height: 70px; background-color: #D3D3D3;position:fixed;bottom:0;left:0;width:100%;}
			.bottom img{float: left; width: 50px; height: 50px;margin: 10px;}
			.bottom p{float: left; color: #FFFFFF;line-height: 70px;font-size: 18px;}
			.bottom button{float: right;margin: 20px 10px 0 0;background-color: #6ccdff;}
			.bottom button a{color: #FFFFFF;}

			#beforenext {text-align: center;height: 49px;line-height: 49px;margin-top:10px;}
			#beforenext a {font-size: 18px;color: black;}
			#beforenext span {font-size: 40px;color: black;}
			#question-area{width: 95%;margin: 0 auto;border: 1px solid #aaaaaa;
				box-shadow:-3px 0 3px #D3D3D3, /*左边阴影*/  3px 0 3px #D3D3D3, /*右边阴影*/
				0 3px 3px #D3D3D3, /*顶部阴影*/  0 3px 3px #D3D3D3; /*底边阴影*/  }
			#question {margin-top: 2px; height: 60px;}
			#question p {font-size: 20px;color:#000000;padding: 25px 0 ;width: 300px;margin: 0 auto;text-indent:10px;}
			#choose {margin: 20px;}
			.score{margin-bottom: 12px;}
			#choose div p {text-align: center;font-size: 18px;color: #000000;line-height:50px;}
			#choose div p:active{color: white;}
			.choosebg {background: #f5f6fa;width: 100%;height: 49px;
				line-height: 3;color: #fff}
			#progressbar{width:100%; border:1px #F3F3F3 solid; height:25px; position: relative;
				background: #f5f6fa;}
			#bar{position:absolute;background-color: #ffb4db;width: 0;height: 100%;}
			.choosebg_active:active{background: #ffb4db;color:#000;}
			.more_text{
				margin:10px;
			}

			/* 弹窗 */
			#hank-popup {
				position: fixed;
				z-index: 10000;
				top: 50%;
				left: 50%;
				overflow: hidden;
				width: 270px;
				-webkit-transition-property: -webkit-transform,opacity;
				transition-property: transform,opacity;
				-webkit-transform: translate3d(-50%,-50%,0) scale(1.185);
				transform: translate3d(-50%,-50%,0) scale(1.185);
				text-align: center;
				opacity: 0;
				color: #000;
				border-radius: 13px;
				display: none;
			}
			#hank-popup.hank-popup-in {
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;
				-webkit-transform: translate3d(-50%,-50%,0) scale(1);
				transform: translate3d(-50%,-50%,0) scale(1);
				opacity: 1;
			}
			.hank-popup-inner {
				position: relative;
				padding: 15px;
				border-radius: 13px 13px 0 0;
				background: rgba(255,255,255,.95);
			}
			.hank-popup-inner:after {
				position: absolute;
				z-index: 15;
				top: auto;
				right: auto;
				bottom: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				-webkit-transform-origin: 50% 100%;
				transform-origin: 50% 100%;
				background-color: rgba(0,0,0,.2);
			}
			.hank-popup-title {
				font-size: 18px;
				font-weight: 500;
				text-align: center;
			}
			.hank-popup-title+.hank-popup-text {
				font-family: inherit;
				font-size: 14px;
				margin: 5px 0 0;
			}
			.hank-popup-buttons {
				position: relative;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				height: 44px;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
			}
			.hank-popup-button {
				font-size: 17px;
				line-height: 44px;
				position: relative;
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				width: 100%;
				height: 44px;
				padding: 0 5px;
				cursor: pointer;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #ff8fc0;
				background: rgba(255,255,255,.95);
				-webkit-box-flex: 1;
			}
			.hank-popup-button:first-child {
				border-radius: 0 0 0 13px;
			}
			.hank-popup-button:last-child {
				border-radius: 0 0 13px;
			}
			.hank-popup-button.hank-popup-button-bold {
				font-weight: 600;
			}
			.hank-popup-backdrop {
				position: fixed;
				z-index: 998;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;
				opacity: 0;
				background: rgba(0,0,0,.4);
			}
			.hank-popup-backdrop.hank-active {
				opacity: 1;
			}
			.hank-popup-button:after {
				position: absolute;
				z-index: 15;
				top: 0;
				right: 0;
				bottom: auto;
				left: auto;
				display: block;
				width: 1px;
				height: 100%;
				content: '';
				-webkit-transform: scaleX(.5);
				transform: scaleX(.5);
				-webkit-transform-origin: 100% 50%;
				transform-origin: 100% 50%;
				background-color: rgba(0,0,0,.2);
			}
			#people_num{
				padding-top:15px;
				color:#ff7e00;
			}
			.mui-content{
				padding-bottom:70px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<!--<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav">下一题</span>
			</button>-->
			<h1 class="mui-title" id="title">ESRS中风(卒中)风险测试</h1>
			<!--<a id="share" class="mui-icon iconfont icon-share mui-pull-right" onclick="share()"></a>-->
		</header>
		<div class="mui-content">
			<div id="beforenext">
				<a id="before" class="mui-pull-left" style="margin-left: 31px;"></a>
				<div style="width: 70px;margin: 0 auto;">
					<span id="page">1</span><span>/8</span>
				</div>
			</div>
			<!--进度条-->
			<div id="progressbar">
				<span id="bar"></span>
			</div>
			<div class="bg">
				<div id="question-area">
					<div id="question">
						<p></p>
					</div>
					<div id="choose">
						<div class="mui-row">

							<div data-score="1" class="score mui-col-sm-12 mui-col-xs-12">
								<div class="choosebg"><p class="choice center" id="a"></p></div>
							</div>
							<div data-score="0" class="score mui-col-sm-12 mui-col-xs-12">
								<div class="choosebg"><p class="choice" id="b"></p></div>
							</div>
						</div>
						<div id="two" class="mui-row">
							<div data-score="2" class="score other mui-col-sm-12 mui-col-xs-12">
								<div class="choosebg"><p class="choice" id="c"></p></div>
							</div>
							<!--<div data-score="4" class="score mui-col-sm-6 mui-col-xs-6">
                                <img src="images/D-bg@1x.png" />
                                <p class="choice" id="d"></p>
                            </div>-->
						</div>
					</div>
				</div>
			</div>
			<div class="bottom">
        			<img  class="score mui-col-sm-2 mui-col-xs-2" src="http://api.chinaola.net/ola/Application/Test/Public/images/logo_@2.png"/>
        			<p class="score mui-col-sm-6 mui-col-xs-6">e护上门APP</p>
        			<button class="score mui-col-sm-3 mui-col-xs-3" type="button"><a href="http://a.app.qq.com/o/simple.jsp?pkgname=o.dcloud.Stroke_hospital">立即下载</a></button>
			</div>

			<!-- 弹窗 -->
			<div id="hank-popup" class="hank-popup-in">
				<div class="hank-popup-inner">
					<div class="hank-popup-title">测试结果</div>
					<div class="hank-popup-text">您得分<span id="defen"></span>分，您目前处于<span class="ce_type"></span> 状况(0-2分属于低危，3-6分属于高危，7-9分属于极高危)<p style="font-size:12px;">结果仅供参考，实际情况以临床判断为准。</p><p id="people_num">您是第<span class="people_hot"></span>位测试者</p></div>
				</div>
				<div class="hank-popup-buttons">
					<span onclick="yes_or_no(0);" class="hank-popup-button">确定</span>
					<span onclick="yes_or_no(1);" class="hank-popup-button hank-popup-button-bold">取消</span>
				</div>
			</div>
		</div>
		<script src="http://api.chinaola.net/ola/Application/Test/Public/js/mui.min.js"></script>
		<script src="http://api.chinaola.net/ola/Application/Test/Public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://api.chinaola.net/ola/Application/Test/Public/js/storage.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://api.chinaola.net/ola/Application/Test/Public/js/server.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var currentpage = 1,
				beforepage = 1;
			var i = 0;
			var test;
			var share_title = "e护上门-ESRS中风(卒中)风险测试";
			var scorearray = new Array();

			$(".choosebg").on("touchstart",function(){
				$(".choosebg_active").removeClass("choosebg_active");
				$(this).addClass("choosebg_active");

			}).on("touchend",function(){
				$(this).removeClass("choosebg_active");
			});
			
			//测试数加一
			$.ajax({
				type: "post",
				url: test_ajax,
				async: true,
				dataType: 'json',
				data: {},
				success: function(data) {
					//console.log(JSON.stringify(data));
					test = data;
					$("#page").text(data.value[currentpage - 1].id);
					$("#question>p").text(data.value[currentpage - 1].topic);
					$("#a").text(data.value[currentpage - 1].option2);
					$("#b").text(data.value[currentpage - 1].option1);
					$("#c").text(data.value[currentpage - 1].option3);
				},
				error: function(xhr, type, errorThrown) {
					mui.alert("网络连接失败");
				}
			});

			$(".score").on("click", function() {
				//$(this).children(".choosebg").css("background-color", "#BF3EFF");
				//$(".score").not($(this)).children(".choosebg").css("background-color", "#d8d8d8");
				if(($(this).children('p').text()) == "是") {
					$(this).data("score", "1");


				}
				if(($(this).children('p').text()) == "否") {
					$(this).data("score", "0");
				}

				a=$("#page")[0].innerHTML;
				b=parseInt(a);

				$("#bar").width(b*12.5+"%");

				if(beforepage < currentpage) {
					//$(this).children(".choosebg").css("background-color", "#d8d8d8");
					scorearray[beforepage - 1] = $(this).data("score");
					beforepage++;
					if(beforepage == 9) {
						account(scorearray);
					}
					$("#page").text(test.value[beforepage - 1].id);
					$("#question>p").text(test.value[beforepage - 1].topic);
					$("#a").text(test.value[beforepage - 1].option1);
					$("#b").text(test.value[beforepage - 1].option2);
					if(test.value[beforepage - 1].option3 == null) {
						$(".other").hide();
					} else {
						$(".other").show();
						$("#c").text(test.value[beforepage - 1].option3);
					}

				} else if(beforepage == currentpage) {

					//$(this).children(".choosebg").css("background-color", "#d8d8d8");
					scorearray[currentpage - 1] = $(this).data("score");
					currentpage++;
					if(currentpage == 9) {
						account(scorearray);
					}
					$("#page").text(test.value[currentpage - 1].id);
					$("#question>p").text(test.value[currentpage - 1].topic);
					$("#a").text(test.value[currentpage - 1].option1);
					$("#b").text(test.value[currentpage - 1].option2);
					if(test.value[currentpage - 1].option3 == null) {
						$(".other").hide();
					} else {
						$(".other").show();
						$("#c").text(test.value[currentpage - 1].option3);
					}
					beforepage = currentpage;
				}
				//				alert(($(this).data("score")));
			});

			function account(scorearray) {
				var total = 0;
				$.each(scorearray, function() {
					total = total + parseInt(scorearray[i]);
					i++;
				});
				if(total >= 0 && total <= 2) {
					$("#hank-popup").show().after('<div class="hank-popup-backdrop hank-active"></div>');
					$("#defen").text(total);
					$('.ce_type').text("低危");
				} else if(total >= 3 && total <= 6) {
					$("#hank-popup").show().after('<div class="hank-popup-backdrop hank-active"></div>');
					$("#defen").text(total);
					$('.ce_type').text("高危");
				} else if(total >= 7 && total <= 9) {
					$("#hank-popup").show().after('<div class="hank-popup-backdrop hank-active"></div>');
					$("#defen").text(total);
					$('.ce_type').text("极高危");
				}
			}

			mui.ajax(hot, {
				type: 'post',
				timeout: 3000,
				data: {},
				dataType: 'json',
				success: function(data) {
					//document.write(JSON.stringify(data));
					if(data.code == "1") {
						$(".people_hot").text(data.testtimes);
					}
				},
				error: function(xhr, type, errorThrown) {
					gotoerror();
					//			alert(JSON.stringify(xhr));
				}
			});

			function yes_or_no(e){
				if (e == 0) {
					$("#hank-popup").hide();
					$(".hank-popup-backdrop").remove();
					mui.back();
					location.reload();
				} else {
					$("#hank-popup").hide();
					$(".hank-popup-backdrop").remove();
					location.reload();
				}
			}
			function share(){
				share_text();
			}

		</script>
		<script src="http://api.chinaola.net/ola/Application/Test/Public/js/share2.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>